<template>
  <div>
      <button @click="toadd">增加</button>
      <button @click="tz">跳转到简介管理</button>
  <table>
    <tr>
      <td>序号</td>
      <td>标题</td>
      <td>作者</td>
      <td>内容</td>
      <td>发布时间</td>
      <td>类型表</td>
      <td>操作</td>
    </tr>
    <tr v-bind:key="blog.bid" v-for="blog in list">
      <td>{{blog.bid}}</td>
      <td>{{blog.title}}</td>
      <td>{{blog.author}}</td>
      <td>{{blog.content}}</td>
      <td>{{blog.publishdate}}</td>
      <td>{{blog.tid==1?"文学":"散文"}}</td>
      <td>
        <button @click="del(blog.bid)">删除</button>
        <button @click="toupdate(blog.bid)">修改</button>
      </td>
    </tr>
  </table>
    <div v-if="addViwe">
      用户id:{{blog.bid}}<br>
      标题:<input type="text" v-model="blog.title"><br>
      作者:<select v-model="blog.author"><br>
      <option value="">请选择</option>
      <option v-bind:key="a" v-for="a in authorlist" v-bind:value="a" v-bind:label="a"></option>
    </select><br>
      内容:<input type="text" v-model="blog.content"><br>
      发布时间:<input type="date" v-model="blog.publishdate"><br>
      类型:<input type="radio" v-model="blog.tid" value="1">文学
      <input type="radio" v-model="blog.tid" value="2">散文<br>
      <button @click="add">保存</button>
      <button @click="no">取消</button>
    </div>
    <div v-if="updateView">
      用户id:{{blog.bid}}<br>
      标题:<input type="text" v-model="blog.title"><br>
      作者:<select v-model="blog.author"><br>
      <option value="">请选择</option>
      <option v-bind:key="a" v-for="a in authorlist" v-bind:value="a" v-bind:label="a"></option>
    </select><br>
      内容:<input type="text" v-model="blog.content"><br>
      发布时间:<input type="date" v-model="blog.publishdate"><br>
      类型:<input type="radio" v-model="blog.tid" value="1">文学
      <input type="radio" v-model="blog.tid" value="2">散文<br>
      <button @click="update">修改</button>
      <button @click="no">取消</button>
    </div>
</div>
</template>

<script>
export default {
  name: 'SttView',
  data () {
    return {
      updateView: false,
      addViwe: false,
      authorlist: ['罗贯中', '施耐庵', '曹旭琴', '周树人'],
      blog: {
        bid: 0,
        title: '',
        author: [],
        content: '',
        publishdate: '',
        tid: 0
      },
      list: [{
        bid: 1,
        title: '啦啦啦',
        author: 'myClass',
        content: '张三三',
        publishdate: '2018-09-12',
        tid: 5
      }]
    }
  },
  methods: {
    update () {
      this.axios.post('/blog/update', this.blog).then(res => {
        if (res.data.code === 200) {
          alert('修改成功')
          this.query()
        } else {
          alert('修改失败' + res.data.code)
        }
      })
      this.updateView = false
    },
    toupdate (bid) {
      this.updateView = true
      this.blog = JSON.parse(JSON.stringify(this.list.find((x) => { return x.bid === bid })))
    },
    no () {
      this.addViwe = false
    },
    toadd () {
      this.addViwe = true
    },
    add () {
      this.axios.post('/blog/add', this.blog).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code === 200) {
          alert('增加成功')
          // 刷新数据
          this.query()
        } else {
          alert('增加失败' + res.data.code)
        }
      })
      this.addViwe = false
    },
    tz () {
      this.$router.push('/Stu')
    },
    del (bid) {
      this.axios.get('/blog/del', { params: { id: bid } }).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.data.code === 200) {
          alert('删除成功')
          // 刷新数据
          this.query()
        } else {
          alert('删除失败' + res.data.code)
        }
      })
    },
    query () {
      this.axios.get('/blog/list', {
        params: {
          page: 1,
          pageSize: 20
        }
      }).then(res => {
        this.list = res.data
      })
    }
  },
  created () {
    this.query()
  }
}
</script>

<style scoped>

</style>
